<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<view class="bigBox" v-for="item,index in tagsList" :key="index">
			<span>{{item.name}}</span>
			<view class="tagBox">
				<view class="childBox" 
				:style="tag.isChoose?'background:#08C8BD;color:#FFFFFF':''" 
				v-for="tag,i in item.tags" :key="i"
				@click="tagClick(index,i)">
					<span>{{tag.val}}</span>
				</view>
			</view>
		</view>
		
		<button class="button" @click="save">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagsList:[{
					name:'性格',
					tags:[{
						val:'内向安静',isChoose:false
					},{
						val:'团队协作',isChoose:false
					},{
						val:'善于沟通',isChoose:false
					},{
						val:'外向开朗',isChoose:false
					},{
						val:'认真负责',isChoose:false
					}]
				},{
					name:'特长',
					tags:[{
						val:'美食制作',isChoose:false
					},{
						val:'数理化',isChoose:false
					},{
						val:'手绘',isChoose:false
					},{
						val:'十佳歌手',isChoose:false
					},{
						val:'乐器',isChoose:false
					},{
						val:'游戏达人',isChoose:false
					},{
						val:'英语',isChoose:false
					}]
				},{
					name:'外貌',
					tags:[{
						val:'模特身材',isChoose:false
					},{
						val:'礼仪气质',isChoose:false
					},{
						val:'颜值上镜',isChoose:false
					},{
						val:'健身达人',isChoose:false
					},{
						val:'小奶狗',isChoose:false
					},{
						val:'清纯',isChoose:false
					}]
				}]
			};
		},
		onLoad() {
			this.getChosenTagsList()
		},
		methods:{
			//获得已选标签
			getChosenTagsList(){
				const chosenTagsList=uni.getStorageSync('tagsList')
				this.tagsList.forEach(item=>{
					item.tags.forEach(v=>{
						if(chosenTagsList.indexOf(v.val)!==-1){
							v.isChoose=true;
						}
					})
				})
			},
			tagClick(index,i){
				this.tagsList[index].tags[i].isChoose=!this.tagsList[index].tags[i].isChoose
			},
			save(){
				const chosenList=[];
				for(let v of this.tagsList){
					for(let k of v.tags){
						if(k.isChoose){
							chosenList.push(k.val)
						}
					}
				}
				uni.setStorageSync('tagsList',chosenList);
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;
		
		.bigBox{
			width: 686rpx;
			margin: 32rpx 32rpx 0;
			
			>span{
				font-size: 14px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			
			.tagBox{
				
				.childBox{
					display: inline-block;
					margin-right: 20rpx;
					margin-top: 14rpx;
					padding: 12rpx 12rpx;
					background: #F3F7F8;
					border-radius: 8rpx;
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
			}
			
		}
		
		button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #08C8BD;
			border-radius: 8px 8px 8px 8px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
